<!DOCTYPE html>
<html lang='cn'>
	<head>
		<meta name='viewport' content='width=device-width,initial-scale=1 .0 user-scale' />
		<meta charset='utf-8' />
		<title>像素灯网页配置</title>
		<style>
			html,
			body {
				height: 100%;
				margin: 0;
				padding: 0;
			}

			body {
				background: rgb(255, 255, 255) center center;
				background-size: cover;
				position: relative;
			}

			.container {
				position: absolute;
				top: 50%;
				text-align: center;
				width: 100%;
				transform: translateY(-50%);
			}

			h1 {
				line-height: 150px;
				color: royalblue;
				font-size: 50px;
				margin: 0px;
			}

			p {
				line-height: 50px;
				color: royalblue;
				font-size: 22px;
				margin: 20px 0px 30px 0px;
			}

			select {
				line-height: 30px;
				width: 190px;
				height: 40px;
				font-size: 20px;
				margin: 10px auto;
				border-radius: 5px;
			}

			.btn {
				width: 150px;
				height: 60px;
				background-color: #7cacae;
				color: #fff;
				font-size: 24px;
				line-height: 60px;
				margin: 10px auto;
				border-radius: 10px;
				transition: 1s;
			}

			.btn:hover {
				background-color: royalblue;
				width: 300px;
				height: 100px;
				line-height: 100px;
				font-size: 36px;
				margin: 100px auto;
			}
		</style>
	</head>
	<body>
		<div class='container'>
			<h1>动态画面</h1>
			<p>动态类型：
				<select>
					<option name='anim' value='00' selected>RainbowColors_p(L)</option>
					<option name='anim' value='01'>RainbowStripeColors_p(N)</option>
					<option name='anim' value='02'>RainbowStripeColors_p(L)</option>
					<option name='anim' value='03'>PurpleAndGreenPalette(L)</option>
					<option name='anim' value='04'>TallyRandomPalette(L)</option>
					<option name='anim' value='05'>BlackAndWhiteStripedPalette(N)</option>
					<option name='anim' value='06'>BlackAndWhiteStripedPalette(L)</option>
					<option name='anim' value='07'>CloudColors_p(L)</option>
					<option name='anim' value='08'>PartyColors_p(L)</option>
					<option name='anim' value='09'>RedWhiteBluePalette_p(N)</option>
					<option name='anim' value='10'>RedWhiteBluePalette_p(L)</option>
				</select>
			</p>
			<script>
				var connection = new WebSocket('ws://' + location.hostname + ':81/', ['arduino']);
				connection.onopen = function() {
					connection.send('Connect ' + new Date());
				};
				connection.onerror = function(error) {
					console.log('WebSocket Error ', error);
				};
				connection.onmessage = function(e) {
					console.log('Server: ', e.data);
				};

				function clickOk() {
					var oAnim = document.getElementsByName('anim');
					for (var i = 0; i < oAnim.length; i++) {
						if (oAnim[i].selected) {
							var oMessage = 'a' + oAnim[i].value;
						}
					}
					console.log('oMessage: ' + oMessage);
					connection.send(oMessage);
				}
			</script><input class='btn' type='submit' value='设置' onclick='clickOk();'>
			<form action='/' method='POST'><input class='btn' type='submit' value='返回主页'></form>
		</div>
	</body>
</html>
